<template>
	<!-- <u-tabbar :value="current ? current : 0" zIndex="9998" @change="changeTab" :fixed="true" :placeholder="true"
		:safeAreaInsetBottom="true" :border="false" inactiveColor="#CCCCCC" activeColor="#545DDE">
		<u-tabbar-item v-for="(item,index) in list" :key="index" :text="item.text">
			<image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.iconPath"></image>
			<image class="u-page__item__slot-icon" slot="active-icon" :src="item.selectedIconPath"></image>
		</u-tabbar-item>
	</u-tabbar> -->
    <view class="tabbar">
        <m-tabbar fixed fill :current="current" @click="changeTab" tabbarHeight="120" :tabbar="tabbar">
            <template v-slot:tabbar_index_2>
                <view class="custom-box">
                    <view class="custom_style">
                        <!-- <view class="custom_style_icon">+</view> -->
                        <image src="../../static/tabbar/exhale.png" class="custom_style_icon" mode=""></image>
                    </view>
                </view>
            </template>
        </m-tabbar>
    </view>
</template>

<script>
	import TabbarConfig from '@/config/tabbar.js'
    import {
        mapGetters
	} from 'vuex'
	export default {
		name: 'tabar',
		props: {
			current: {
				type: Number,
				default: 0
			},
			userId: {
				type: String,
				default: null
			}
		},
		data() {
			return {
				tabbar: TabbarConfig
			}
		},
        computed: {
            ...mapGetters({
            userInfo: 'getUserInfo'
        }),
		},
		methods: {
            isLogin(){
                if (!this.userInfo.userId) {
                    uni.showModal({
						title: '提示',
						content: '需要授权后才能使用。',
						confirmColor: '#545DDE',
						// showCancel: false,
						cancelText: '再看看',
						confirmText: '马上授权',
						success(res) {
                            if (res.confirm) {
		                    	console.log('用户点击确定');
                                uni.navigateTo({
							    	url: `/pagesB/login/index`
							    })
		                    } else if (res.cancel) {
		                    	console.log('用户点击取消');
		                    }
                            
						}
					})
                    return true
                }
                return false
            },
			changeTab(e) {
                let indexArr = [2,3,4]
                if (indexArr.includes(e)) {
                    if (this.isLogin()) return
                }
				if (TabbarConfig.list[e].openType == 'switchTab') {
					uni.switchTab({
						url: '/' + TabbarConfig.list[e].pagePath,
					})
				} else {
					uni.navigateTo({
						url: '/' + TabbarConfig.list[e].pagePath,
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-page__item__slot-icon {
		width: 40rpx;
		height: 40rpx;
		display: block;
	}
	.custom_style {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: -104rpx;
        box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0,71,131,0.2019);
		&_icon {
			width: 54rpx;
			height: 54rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

</style>
